<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					当前位置: |
				</view>
				<view class="uni-list-cell-db">
					<view class="uni-input">{{ curAddress }}</view>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					发起人姓名 |
				</view>
				<view class="uni-list-cell-db">
					<view class="uni-input" style="padding-top: 20rpx;">
						<input type="text" v-model="username" placeholder="请输入您的姓名"/>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					请选择学院 |
				</view>
				<view class="uni-list-cell-db">
					<picker 
					@change="bindPickerChangeCollege" 
					:value="index" 
					:range="colleges">
						<view class="uni-input">{{ collegesIndex === -1 ? '请选择学院' : colleges[collegesIndex] }}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					请选择专业 |
				</view>
				<view class="uni-list-cell-db">
					<picker 
					@change="bindPickerChangeProfessional" 
					:value="index" 
					:range="professionals">
						<view class="uni-input">{{professionalIndex === -1 ? '请选择专业' : professionals[professionalIndex]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					请选择年级 |
				</view>
				<view class="uni-list-cell-db">
					<picker 
					mode="multiSelector"
					@change="bindPickerChangeGradeAndClass" 
					:range="gradeAndClass">
						<view class="uni-input">{{ gradeAndClassInfo ? gradeAndClassInfo : '请选择年级和班级' }}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					请选择课时 |
				</view>
				<view class="uni-list-cell-db">
					<picker 
					@change="bindPickerChangeKeshi" 
					:value="index" 
					:range="keshi">
						<view class="uni-input">{{keshiIndex === -1 ? '请选择课时' : keshi[keshiIndex]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					请选择课程 |
				</view>
				<view class="uni-list-cell-db">
					<picker 
					@change="bindPickerChangeKec" 
					:value="index" 
					:range="kec">
						<view class="uni-input">{{kecIndex === -1 ? '请选择课程' : kec[kecIndex]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					请选择角色 |
				</view>
				<view class="uni-list-cell-db">
					<picker 
					@change="bindPickerChangeJiaoses" 
					:value="index" 
					:range="jiaoses">
						<view class="uni-input">{{jiaosesIndex === -1 ? '请选择角色' : jiaoses[jiaosesIndex]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view @click="setStratSign" class="fq-btn">
			确认发起
		</view>
		
		<loading v-if="showAndHide"></loading>
		<Message v-if="isMessage" :msgText="msgText"></Message>
	</view>
</template>

<script>
	import Message from "../../commpons/Message.vue"
	import io from "@/util/weapp.socket.io.js"
	import loading from "../../commpons/loading.vue"
	import { startSign } from "../../network/signCorrelation.js";
	import { isSignTime } from "@/util/isSignTime.js";
	import { getUserInfo } from "../../network/users.js";
	export default {
		data() {
			return {
				colleges: ['大数据与智能工程学院', '机器人工程学院', '化工学院', '传媒学院','音乐学院','财经学院'],
				professionals: ['对口高职','大数据与云计算', '物联网工程', '网络工程', '软件工程'],
				gradeAndClass:[["2017级","2018级","2019级"], ["1班","2班","3班"]],
				professionalIndex:-1,
				collegesIndex:-1,
				gradeAndClassInfo:'',
				curAddress:'',
				username:'',
				keshi:['上午1-2节','上午3-4节','下午5-6节','下午7-8节','晚上9-10节'],
				keshiIndex:-1,
				kec:['计算机网络','计算机操作系统','计算机专业英语','安卓开发','javascript+jquery'],
				kecIndex:-1,
				jiaoses:['教师','学生'],
				jiaosesIndex:-1,
				socketID:"",
				showAndHide:false,
				isSocket:0,// 保存连接
				isSign:0,
				isMessage:false,
				msgText:"发布成功"
				
			}
		},
		
		onShow() {
			let that = this;
			uni.getLocation({
				geocode:true,
				success(res) {
					that.curAddress  = res.address.poiName;
				}
			})
			
			let data = {};
			let v = uni.getStorageSync("isLogin");
			let vjiaose = uni.getStorageSync("jiaoses");
			getUserInfo({
				_id:v,
				jiaoses:vjiaose
			}).then(res => {
				data = res.data.data;
				that.socketConn(data);
			}).catch(err => {
				console.log("服务器繁忙！");
			})
			
		},
		
		computed: {

		},
		
		methods: {
			socketConn(data){  //socket连接与关闭
				let socket = null;
				socket = io('http://lovezt.free.idcfengye.com')
				this.socketID = socket.id;
			
				//正在连接
				socket.on('connection', d => {
					console.log('正在连接');
				});
				
				// 连接成功  
				socket.on('connect', () => {
					// console.log("ok");
					socket.emit("message",{
						username:data.username,
						colleges:data.colleges,  //学院
						jiaoses:data.jiaoses, //角色
						schollNum:data.schollNum
					})
					
					this.isSocket = 1;
					console.log("连接成功");
				});
				
				// 连接错误   服务器发送错误
				socket.on('connect_error', d => {
					this.isSocket = 0;
					console.log("连接错误   服务器发送错误");
				});
				
				// 连接超时
				socket.on('connect_timeout', d => {
					this.isSocket = 0;
					console.log("连接超时");
				});
				
				// 断开连接
				socket.on('disconnect', reason => {
					this.isSocket = 0;
					console.log('断开连接', reason);
				});
				
				// 重新连接  服务器无错误后 自动重新连接
				socket.on('reconnect', attemptNumber => {
					console.log("重新连接  服务器无错误后 自动重新连接");
				});
				
				// 连接失败
				socket.on('reconnect_failed', () => {
					this.isSocket = 0;
					console.log("连接失败");
				});
			},
			
			setStratSign(){  //发送签到数据
				let that = this;
				this.showAndHide = true;
				if(this.isSocket === 1){ //判断是否连接成功
					
					if(isSignTime() !== 0){ //判断是否符合发起时间
						if(
						that.username === "" ||
						that.collegesIndex === -1 ||
						that.professionalIndex === -1 || 
						that.gradeAndClassInfo === "" || 
						that.keshiIndex === -1 ||
						that.kecIndex === -1 || 
						that.jiaosesIndex === -1
						){
							that.tips("请信息填写完整")
						}
					
						let n = new Date();
						let data = {
							curAddress:this.curAddress, //地址
							username:this.username,  //用户名
							colleges:this.colleges[this.collegesIndex],  //学院
							professionals:this.professionals[this.professionalIndex], //专业
							gradeAndClass:this.gradeAndClassInfo,  //
							keshi:this.keshi[this.kecIndex],  //课时
							kec:this.kec[this.kecIndex],  //课程
							jiaoses:this.jiaoses[this.jiaosesIndex],
							signTime:new Date().getTime(),
							nowDate:n.getFullYear()+":"+(n.getMonth()+1)+":"+n.getDate()
						}
						
						//发送请求
						startSign(data).then(res=>{
							
							if(res.data.code === 1){
								that.isMessage = true;
								setTimeout(()=>{
									that.isMessage = false;
								},2000)
							}
							
							this.showAndHide = false;
						}).catch(err=>{
							console.log(err);
						})
					}else{
						this.tips("不是签到发起时间");
						this.showAndHide = false;
					}
					
				}else if(this.isSocket === 0){
					console.log("服务器繁忙");
					this.isSocket = 0;
					this.showAndHide = false;
				}
			},
			
			tips(text){
				this.isMessage = true;
				this.msgText = text;
				setTimeout(()=>{
					this.isMessage = false;
				},2000)
			},
			
			bindPickerChangeCollege(e) {  //学院
				this.collegesIndex = e.target.value;
				
			},
			bindPickerChangeProfessional(e){  //专业
				this.professionalIndex = e.target.value
				
			},
			bindPickerChangeGradeAndClass(e){ //年级的班级
			    this.gradeAndClassInfo = this.gradeAndClass[0][e.target.value[0]]+" "+this.gradeAndClass[1][e.target.value[1]]
			
			},
			bindPickerChangeKeshi(e){   //课时
				this.keshiIndex = e.target.value
			},
			bindPickerChangeJiaoses(e){   //校色
				this.jiaosesIndex = e.target.value
			},
			bindPickerChangeKec(e){
				this.kecIndex = e.target.value
			}
		},
		components:{
			loading,
			Message
		}
	}
</script>

<style scoped>
	.uni-list {
		background: #FFFFFF;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		margin-top: 20rpx;
	}

	.uni-list-cell {
		display: flex;
	}

	.uni-list-cell-left {
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.uni-list-cell-db {
		flex: 1;
	}
	.fq-btn{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 14px;
		color: #007AFF;
		width: 100%;
		margin-top: 40rpx;
		background: #FFFFFF;
	}
</style>
